<template>
  <view class="timer-dialog">
    <!-- 有计时器的弹出窗 -->
    <van-popup v-model="showDialog" @close="close">
      <view class="timer-dialog-box">
        <view class="timer-dialog-title">提示</view>
        <view class="timer-dialog-content">强制开门会结束当前充电订单是否确认开门?</view>
        <view class="timer-dialog-but">
          <van-button type="default" class="timer-dialog-but-item" @click="showDialog = false">取消</van-button>
          <van-button type="default" class="timer-dialog-but-item sure" :disabled="!!times" @click="sure">确认{{ times ? `(${times})` : "" }}</van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    time: {
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      showDialog: this.show,
      times: this.time,
    }
  },
  watch: {
    show: {
      handler(val) {
        this.showDialog = val
        // 弹窗打开后开始倒计时
        if (val) {
          this.times = this.time
          this.initRead()
        }
      },
      immediate: true,
    },
  },
  methods: {
    close() {
      this.$emit("update:show", this.showDialog)
    },
    sure() {
      this.$emit("sure")
      this.showDialog = false
    },
    // 定时器
    initRead() {
      let timer = null
      if (this.times) {
        this.times--
        timer = setTimeout(() => {
          this.initRead()
        }, 1000)
        return
      }
      clearTimeout(timer)
    },
  },
}
</script>

<style lang="scss" scoped>
.timer-dialog {
  &-box {
    width: 640upx;
  }
  &-title {
    padding-top: 50upx;
    font-weight: 500;
    text-align: center;
  }
  &-content {
    color: #646566;
    padding: 26px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
    text-align: center;
  }
  &-but {
    display: flex;
    overflow: hidden;
    &-item {
      flex: 1;
      font-size: 30upx;
    }
    .sure {
      color: #1989fa;
    }
    .disable {
      background: #000;
    }
  }
}
</style>
